<template>
	<view class = "content">
		<view class="example-body top-bar">
			<uni-nav-bar :statusBar="true">
				<template v-slot:left>
					<view class="avatar-img">
						<image :src="user.avatarUrl" mode="widthFix"></image>
					</view>
				</template>
				<template v-slot:default>
					<view class="top-bar-title">
						<view class="main-title">消息</view>
						<view class="sub-title">{{user.motto}}</view>
					</view>
				</template>
				<template v-slot:right>
					<view class="right-container flex-ali-center">
						<view class="group-btn iconfont icon-yaoqinghaoyou" @click="showFriends"></view>
						<view class="add-friend-btn iconfont icon--"  @click="addFriends"></view>
					</view>
				</template>
			</uni-nav-bar>
		</view>
		
		<view class="search-container" @click="toSearchFriend">
			<fun-search-btn placeholder="搜索好友"></fun-search-btn>
		</view>
		
		<view class="friend-list">
			<!-- 遍历好友消息列表 -->
			<block v-for="(item,index) in chatList" :key="item.uid">
				<view class="friend-list-item flex-ali-center"  v-if="item.messageList.length > 0">
					<view class="list-item-l">
						<view class="tip-num flex-all-centen" v-if="item.tip && item.tip > 0">{{item.tip}}</view>
						<image  @click="toFriendDetaile(item.uid)" 
						:src="item.avatar" 
						mode="widthFix"></image>
					</view>
					<view class="list-item-r" @click="toChatRoom" :data-friendUid="item.uid">
						<view class="list-item-r-t flex-juscon-bet flex-ali-center">
							<view class="nick-name">{{item.friendName}}</view>
							<view class="send-time">{{item.messageList[item.messageList.length -1].sendTime|forMatDate}}</view>
						</view>
						<view class="message-content">{{item.messageList[item.messageList.length -1] | getContent}}</view>
					</view>
				</view>
			</block>
		</view>
		
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import funSearchBtn from '@/components/funSearchBtn/funSearchBtn.vue';
	import {Friend} from '@/model/friend.js'
	import {utils} from '@/utils/utils.js';
	import {Message} from '@/model/message.js';
	// import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';

	export default {
		data() {
			return {
				friends:[],
				user:{},
				chatList:[],
			};
		},
		components:{
			uniNavBar,
			funSearchBtn,
			// uniStatusBar
		},
		onShow() {
			this.chatList = this.$store.chatList ? this.$store.chatList : []
			this.$store.socketTask.set_uni(this)
			let isShowDot = false;
			this.chatList.forEach(item=>{
				if(item.tip > 0){
					isShowDot = true
					return
				}
			})
			if(isShowDot){
				uni.showTabBarRedDot({
					index:2
				})
			}else{
				uni.hideTabBarRedDot({
					index:2
				})
			}
		},
		async onLoad() {
			// console.log(this.$store.user)
			this.user = this.$store.user
			this.friends = Friend.getFridens()
			// 从本地缓存中取出用户消息缓存
			// this.chatList = JSON.parse(this.$utils.getStorage("chatList"))
			this.chatList = this.$store.chatList
			// 将store变量同步
			this.$store.chatList = this.chatList
		},
		filters:{
			forMatDate(date){
				
				return utils.dateTime(date)
			},
			getContent(e){
				if(e.contentType == 1){
					return e.contentText
				}
				if(e.contentType == 2){
					return "[图片]"
				}
				if(e.contentType == 3){
					return "[语音]"
				}
				if(e.contentType == -1){
					return e.contentText
				}
			}
		},
		onUnload() {
			this.$utils.setStorage("chatList",this.$store.chatList)
		},
		methods:{
			toSearchFriend(){
				uni.navigateTo({
					url:'../searchFriend/searchFriend'
				})
			},
			toFriendDetaile(friendUid){
				console.log(friendUid)
				uni.navigateTo({
					url: '../friendDetaile/friendDetaile',
					success: res => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {friendUid:friendUid})
					}
				})
			},
			toChatRoom(e){
				let friendUid = e.currentTarget.dataset.friendUid
				if(friendUid == -1){
					uni.navigateTo({
						url:"../addFriendList/addFriendList"
					})
					return
				}
				let friendMsgIndex = this.chatList.findIndex(item=>item.uid == friendUid)
				this.$store.chatList[friendMsgIndex].tip = 0
				
				this.$store.chatList[friendMsgIndex].messageList.forEach(item=>item.messageStatus = 1)
				this.$utils.setStorage("chatList",this.$store.chatList)
				let isShowDot = false;
				this.$store.chatList.forEach(item=>{
					if(item.tip > 0){
						isShowDot = true
						return
					}
				})
				if(!isShowDot){
					uni.hideTabBarRedDot({
						index:2
					})
				}
				let _this = this
				uni.navigateTo({
					url:'../chatRoom/chatRoom',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { friendUid: friendUid })
						let message = {
							uid:friendUid,
							toFriendId:_this.$store.user.uid,
							contentType:5,
						}
						_this.$store.socketTask.sockSend(message)
					}
				})
			},
			showFriends(){
				uni.navigateTo({
					url:"../friendList/friendList"
				})
			},
			addFriends(){
				uni.navigateTo({
					url:"../searFriends/searFriends"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.content{
		.top-bar{
			padding: 0 20rpx;
			.avatar-img{
				image{
					width: 60rpx;
					height: 60rpx;
					border-radius: 20rpx;
				}
			}
			.top-bar-title{
				margin: 0 auto;
				text-align: center;
				line-height: 1.2;
				.main-title{
					color: #333333;
					font-size: 28rpx;
				}
				.sub-title{
					color: #888888;
					font-size: 20rpx;
				}
			}
			.right-container{
				.group-btn,
				.add-friend-btn{
					font-size: 40rpx;
					color: $fun-theme-color;
					margin: 0 20rpx;
				}
			}
		}
		.friend-list{
			.friend-list-item{
				height: 120rpx;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				margin-top: 20rpx;
				.list-item-l{
					position: relative;
					width: 90rpx;
					height: 90rpx;
					.tip-num{
						box-sizing: border-box;
						height: 36rpx;
						min-width: 36rpx;
						padding:0 10rpx;
						background-color: #FF0000;
						color: #FFFFFF;
						font-size: 20rpx;
						border-radius: 36rpx;
						position: absolute;
						top: -6rpx;
						right: -6rpx;
						z-index: 10;
					}
					image{
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}
				}
				.list-item-r{
					flex: 1;
					margin-left: 20rpx;
					.list-item-r-t{
						.nick-name{
							font-weight: bold;
							color: $fun-text-color;
							font-size: 28rpx;
						}
						.send-time{
							font-size: 20rpx;
							color: #B5B5B5;
						}
					}
					.message-content{
						width: 100%;
						margin-top: 4rpx;
						margin-right: 20rpx;
						font-size: 24rpx;
						color: #666;
						max-width: 560rpx;
						
						// display: -webkit-box;
						// -webkit-box-orient: vertical;
						// -webkit-line-clamp: 1;
						// overflow: hidden;
						overflow:hidden; //超出的文本隐藏
						text-overflow:ellipsis; //溢出用省略号显示
						white-space:nowrap; //溢出不换行
					}
				}
			}
		}
	}
</style>
